<script setup>
import {ref} from "vue";
import http from "@/utils/http.js";
import {View} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const articleList = ref([])
const router=useRouter()

//aid-文章id
const getArticleContent = async (aid) =>{
  try{
    const response = await http.get(`/expert/articleCard`)
    articleList.value = response.data
    articleList.value=articleList.value.slice(0,5)
    console.log(response)
  }catch (error){
    console.error('获取文章内容失败:',error)
  }
}
getArticleContent();


</script>

<template>
  <el-card class="article-card" shadow="hover">
    <el-row v-for="article in articleList"
            :key="article.article_id"
            class="ArticleCard"
    @click="router.push(`/expert/articleDetail/${article.article_id}`)">
      <el-col :span="6">
        <div class="head">
  <!--        <img style="width: 80px; height: 70px" src=""  alt=""/>-->
          <el-image
              style="width: 80px; height: 65px; margin:4px 5px 2px 5px;"
              :src="article.cover_image"
          />
        </div>
      </el-col>
      <el-col :span="18">
        <div class="header">
          <span>{{article.title}}</span>
        </div>

        <div class="footer">
          <span style="float: left;">智农销：67华哥</span>
          <span style="float:right;margin:0 15px;"> <el-icon><View /></el-icon> 21248</span>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="less">
.article-card {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.ArticleCard{
  width: auto;
  height: 78px;

}
.ArticleCard:hover{
  transition: transform .2s, box-shadow .2s;
  transform: translateY(-4px);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
  border-radius: 5px;
  cursor: pointer; //光标变成手
}
.header{
  margin-top: 5px;
  font-size: 13px;

}

.header:hover{

  color:#14c131
}
.footer{
  font-size: 12px;
  color: #909090;
  margin-top: 20px;
}
</style>